<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <style>
      img {
        width: 100%;
      }
      .damu-thumbnail img {
        width: auto;
      }
      .damu-carousel,
      .damu-three {
        margin-top: 50px;
      }
      .damu-hr {
        margin: 50px auto;
      }
      .damu-hr > hr {
        border: 1px solid deepskyblue;
      }
      .damu-carousel,
      .damu-carousel .item {
        height: 500px;
        overflow: hidden;
      }
      .carousel-caption {
        bottom: 5%;
      }
      @media screen and (max-width: 768px) {
        .carousel-caption {
          bottom: 8%;
        }
        .damu-carousel,
        .damu-carousel .item {
          height: 270px;
        }
      }
    </style>
  </head>
  <body>
    <!--导航-->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
            aria-expanded="false"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">现代浏览器博物馆</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">综述 <span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">简述</a></li>
            <li class="dropdown">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
                >特点 <span class="caret"></span
              ></a>
              <ul class="dropdown-menu" id="damu-nav">
                <li><a href="#chrome">Chrome</a></li>
                <li><a href="#firefox">Firefox</a></li>
                <li><a href="#safari">Safari</a></li>
                <li><a href="#opera">Opera</a></li>
                <li><a href="#IE">IE</a></li>
              </ul>
            </li>
            <li>
              <a href="javascript:;" data-toggle="modal" data-target="#myModal"
                >关于</a
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!--轮播-->
    <div
      id="carousel-example-generic"
      class="carousel slide damu-carousel"
      data-ride="carousel"
      data-interval="3000"
    >
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li
          data-target="#carousel-example-generic"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        <li data-target="#carousel-example-generic" data-slide-to="5"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="./images/chrome-big.jpg" alt="..." />
          <div class="carousel-caption">Chrome</div>
        </div>
        <div class="item">
          <img src="./images/firefox-big.jpg" alt="..." />
          <div class="carousel-caption">Firefox</div>
        </div>
        <div class="item">
          <img src="./images/safari-big.jpg" alt="..." />
          <div class="carousel-caption">...</div>
        </div>
        <div class="item">
          <img src="./images/opera-big.jpg" alt="..." />
          <div class="carousel-caption">...</div>
        </div>
        <div class="item">
          <img src="./images/ie-big.jpg" alt="..." />
          <div class="carousel-caption">...</div>
        </div>
      </div>

      <!-- Controls -->
      <a
        class="left carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="prev"
      >
        <span
          class="glyphicon glyphicon-chevron-left"
          aria-hidden="true"
        ></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="right carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="next"
      >
        <span
          class="glyphicon glyphicon-chevron-right"
          aria-hidden="true"
        ></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <!--三列布局-->
    <div class="container damu-three">
      <div class="row">
        <div class="col-md-4 damu-thumbnail text-center">
          <img src="./images/chrome-logo-small.jpg" alt="..." />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p>
              <a href="#" class="btn btn-primary" role="button">Button</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 damu-thumbnail text-center">
          <img src="./images/firefox-logo-small.jpg" alt="..." />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p>
              <a href="#" class="btn btn-primary" role="button">Button</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 damu-thumbnail text-center">
          <img src="./images/safari-logo-small.jpg" alt="..." />
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p>
              <a href="#" class="btn btn-primary" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!--线-->
    <div class="container damu-hr">
      <hr />
    </div>

    <!--标签-->
    <div class="container" id="damu-tab">
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist" id="damu-list">
        <li role="presentation" class="active">
          <a href="#chrome" aria-controls="chrome" role="tab" data-toggle="tab"
            >Chrome</a
          >
        </li>
        <li role="presentation">
          <a
            href="#firefox"
            aria-controls="firefox"
            role="tab"
            data-toggle="tab"
            >Firefox</a
          >
        </li>
        <li role="presentation">
          <a href="#safari" aria-controls="safari" role="tab" data-toggle="tab"
            >Safari</a
          >
        </li>
        <li role="presentation">
          <a href="#opera" aria-controls="opera" role="tab" data-toggle="tab"
            >Opera</a
          >
        </li>
        <li role="presentation">
          <a href="#IE" aria-controls="IE" role="tab" data-toggle="tab">IE</a>
        </li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="chrome">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-7">
                <h3>chrome 这里是间接文字</h3>
              </div>
              <div class="col-md-5">
                <img src="./images/chrome-logo.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="firefox">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-7">
                <h3>Firefox 这里是间接文字</h3>
              </div>
              <div class="col-md-5">
                <img src="./images/chrome-logo.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="safari">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-7">
                <h3>chrome 这里是间接文字</h3>
              </div>
              <div class="col-md-5">
                <img src="./images/chrome-logo.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="opera">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-7">
                <h3>Safari 这里是间接文字</h3>
              </div>
              <div class="col-md-5">
                <img src="./images/chrome-logo.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="IE">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-7">
                <h3>ie 这里是间接文字</h3>
              </div>
              <div class="col-md-5">
                <img src="./images/chrome-logo.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--实体字符-->
    <div class="container">&copy;尚硅谷</div>

    <!--模态框-->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body">
            <p>One fine body&hellip;</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
  </body>
  <script src="./js/jquery-1.10.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>

  <script>
    // $('#myModal').modal({
    //   keyboard: false,
    // })

    $('#damu-nav>li>a').click(function (e) {
      var href = $(this).attr('href')
      $('#damu-list > li > a[href=' + href + ']').tab('show')
      $(document).scrollTop($('#damu-tab').offset().top)
    })
  </script>
</html>
